<template>
  <div>
    <!-- <zm-form
      :model="form"
      :rules="$product.rules"
      ref="form"
      label-width="150px"
      label-position="right"
    > -->
    <el-tabs tab-position="left" v-model="activeName" v-if="+form.type !== 3">
      <!-- 兑换券、次卡展示此菜单栏 -->
      <template v-if="isShowMenu">
        <el-tab-pane label="线上基础规则" v-if="isShowOnline" name="1">
          <online-base ref="online" />
        </el-tab-pane>
        <el-tab-pane label="线上特殊节假日规则" v-if="isShowOnline" name="3">
          <online-special />
        </el-tab-pane>
        <el-tab-pane label="线下基础规则" v-if="isShowOffline" name="2">
          <offline-base ref="offline" />
        </el-tab-pane>
        <el-tab-pane label="线下特殊节假日规则" v-if="isShowOffline" name="4">
          <offline-special />
        </el-tab-pane>
        <el-tab-pane label="心选膨胀规则" v-if="isShowExpand" name="5">
          <expand-xinxuan ref="expand" />
        </el-tab-pane>
        <el-tab-pane label="心选使用须知" v-if="isShowExchangeRules" name="6">
          <remark-xinxuan></remark-xinxuan>
        </el-tab-pane>
      </template>
      <!-- 卖品券展示 -->
      <template v-if="+form.type === 2">
        <el-tab-pane label="线上规则" v-if="isShowOnline" name="1">
          <sell-online-rule ref="sellOnline" />
        </el-tab-pane>
        <el-tab-pane label="线下规则" v-if="isShowOffline" name="2">
          <sell-offline-rule ref="sellOffline" />
        </el-tab-pane>
      </template>
      <empty-data
        class=""
        v-if="isShowMsg"
        size="middle"
        placeholder="请勾选兑换范围"
      ></empty-data>
    </el-tabs>
    <!-- 点卡展示 -->
    <template v-if="+form.type === 3">
      <div v-if="isShowPointCard">
        <point-card ref="pointCard" />
      </div>
      <empty-data
        class=""
        v-if="!isShowPointCard"
        size="middle"
        placeholder="电影业务暂无可配置规则"
      ></empty-data>
    </template>
    <empty-data
      class=""
      v-if="form.type === '4'"
      size="middle"
      placeholder="次卡规则暂和兑换券规则一致"
    ></empty-data>
    <!-- </zm-form> -->
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import OnlineBase from './components/OnlineBase'
import OnlineSpecial from './components/OnlineSpecial'
import OfflineBase from './components/OfflineBase'
import OfflineSpecial from './components/OfflineSpecial'
import SellOnlineRule from './components/SellOnlineRule'
import SellOfflineRule from './components/SellOfflineRule'
import PointCard from './components/PointCard'
import expandXinxuan from './components/expandXinxuan'
import RemarkXinxuan from './components/remarkXinxuan'
export default {
  name: 'StepTwo',
  components: {
    OnlineBase,
    OnlineSpecial,
    OfflineBase,
    OfflineSpecial,
    SellOnlineRule,
    SellOfflineRule,
    PointCard,
    expandXinxuan,
    RemarkXinxuan
  },
  inject: ['$product'],
  mixins: [tableMixin],
  data () {
    return {
      activeName: '1'
    }
  },
  computed: {
    form: {
      get () {
        return this.$product.form
      },
      set (val) {
        this.$product.form = val
      }
    },
    // 是否展示线上规则
    isShowOnline () {
      return this.form.exchangeRange.includes('1')
    },
    // 是否展示线下规则
    isShowOffline () {
      return this.form.exchangeRange.includes('2')
    },
    // 是否展示膨胀规则
    isShowExpand () {
      return (
        this.form.exchangeRange.includes('3') &&
        (this.form.businessType.includes('3') ||
        this.form.useScope.includes('2'))
      )
    },
    // 兑换券、次卡展示
    isShowMenu () {
      return ['1', '5'].includes(this.form.type)
    },
    // 点卡且业务类型有包含心选展示，其余不展示
    isShowPointCard () {
      return this.form.businessType.includes('3') || this.form.useScope.includes('2')
    },
    // 若第一步没勾选兑换范围展示文本
    isShowMsg () {
      if (this.isShowOnline || this.isShowOffline || this.isShowExpand) {
        return false
      } else {
        if (this.form.type === '4') {
          return false
        } else {
          return true
        }
      }
    },
    isShowExchangeRules() {
      return +this.form.type === 5 && this.form.useScope.includes('2')
    }
  },
  watch: {
    // 使用规则默认选中第一个tab
    'form.exchangeRange': {
      handler () {
        const exchange = this.form.exchangeRange.split(',')
        if (exchange.includes('1')) {
          this.activeName = '1'
        } else if (exchange.includes('2')) {
          this.activeName = '2'
        } else if (exchange.includes('3')) {
          this.activeName = '5'
        } else {
          this.activeName = '1'
        }
      },
      immediate: true
    }
  },
  created () {},
  methods: {
    // 表单校验
    async handleFormValidate () {
      let _valid = false
      let msgList = []

      // 兑换券、优惠券
      if (['1', '5'].includes(this.form.type)) {
        let arr = []
        // 线上
        if (this.isShowOnline) {
          arr.push(this.$refs.online.validate())
          if (
            this.form.onlineSpecialRule &&
            this.form.onlineSpecialRule[0] &&
            this.form.onlineSpecialRule[0].programId
          ) {
            _valid = true
          } else {
            _valid = false
            msgList.push('特殊线上特殊节假日')
          }
        }
        // 线下
        if (this.isShowOffline) {
          arr.push(this.$refs.offline.validate())

          if (
            this.form.offlineSpecialRule &&
            this.form.offlineSpecialRule[0] &&
            this.form.offlineSpecialRule[0].programId
          ) {
            _valid = true
          } else {
            _valid = false
            msgList.push('特殊线下特殊节假日')
          }
        }

        if (this.isShowExpand) {
          arr.push(this.$refs.expand.validate())

          this.$refs.expand
            .validate()
            .then(() => {
              _valid = true
            })
            .catch(() => {
              _valid = false
              msgList.push('心选膨胀规则')
            })
        }

        return new Promise((resolve, reject) => {
          if (arr && arr.length > 0) {
            Promise.all(arr)
              .then(() => {
                _valid
                  ? resolve()
                  : reject(`使用规则：${msgList.join('、')}`)
              })
              .catch(err => {
                msgList.push(err)
                console.log(msgList)
                msgList = msgList.filter(Boolean)
                reject(`使用规则：${msgList.join('、')}`)
              })
          }
        })
      }

      // 卖品券
      if (this.form.type === '2') {
        return new Promise((resolve, reject) => {
          let arr = []

          if (this.isShowOnline) {
            arr.push(this.$refs.sellOnline.validate())
          }
          if (this.isShowOffline) {
            arr.push(this.$refs.sellOffline.validate())
          }
          if (arr && arr.length > 0) {
            Promise.all(arr)
              .then(() => {
                resolve()
              })
              .catch(err => {
                msgList.push(err)
                reject(`使用规则：${msgList.join('、')}`)
              })
          }
        })
      }
      // 点卡
      if (this.form.type === '3') {
        return new Promise((resolve, reject) => {
          if (this.isShowPointCard) {
            this.$refs.pointCard
              .validate()
              .then(() => {
                resolve()
              })
              .catch(() => {
                reject('心选业务')
              })
          } else {
            resolve()
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
